<template>

  <div class="container">

    <!--工具简介-->
    <div class="tools-intro" :style="{backgroundImage:'url('+require('../assets/banner-tools.png')+')'}" style=" background-size:100% 100%;">
      <div style="width: 1600px; align-items: center; margin: 0 auto; " >
        <el-image style="width: 100px; height: 100px; float: left" :src="require('@/assets/icon/CSS3.svg')"></el-image>
        <div style="position: relative;  left: 40px">
          <p style="font-size: 25px; font-weight: 600">CSS代码格式化工具</p>
          <p>CSS格式化采用CSS Beautify插件实现</p>

        </div>

      </div>


    </div>

    <div style="width:1600px; margin:40px auto">
      <h3>操作区</h3>
      <el-button @click="cssFormat" type="primary">格式化代码</el-button>
      <el-button   v-clipboard:copy="formatCssCode"
                   v-clipboard:success="onCopy"
                   v-clipboard:error="onError" type="success">粘贴至剪贴板</el-button>

    </div>

    <!--代码框-->
    <div style="width: 1600px;display: flex; justify-content: space-between;">

      <div style="width: 49%">
        <h3>待格式化CSS</h3>
        <el-input class="inputCode" v-model="nativeCssCode"
                  type="textarea"
                  :rows="20"></el-input>
      </div>

      <div style="width: 49%">
        <h3>格式化CSS</h3>
        <el-input v-model="formatCssCode"
                  type="textarea"
                  :rows="20"  ></el-input>
      </div>
    </div>

    <div style=" position: absolute; bottom: 0;">
      <p>工具库 由 OSREDM.COM 所有</p>
    </div>



  </div>
</template>

<script>
// import beautify from 'beautify';
import cssbeautify from 'cssbeautify'

import {Message} from "element-ui";

export default {
  name: "CssTools",
  data(){
    return{
      nativeCssCode: '',
      formatCssCode:'',

    }
  },
  methods:{
    onCopy: function () {
      Message.success("已拷贝至剪贴板！")
      // alert('You just copied: ' + e.text)
    },
    onError: function () {
      Message.warning("拷贝失败，请确认格式化区域是否有内容")

    },













    cssFormat(){
      this.formatCssCode = cssbeautify(this.nativeCssCode)

    },


  }
}
</script>

<style scoped>
.container{
  text-align: left;
  display: flex;
  flex-direction: column;
  /*justify-content: center;    !* 垂直居中 *!*/
  align-items: center;        /* 水平居中 */
  background: #FAFCFF;
  height: 100%;
}


.tools-intro{

  width: 100%;
  height: 200px;
  box-shadow: 0px 0px 40px 0px rgb(217, 224, 234);


}



/deep/ .el-textarea__inner {
  font-family: sans-serif !important;

}

/deep/.el-button.el-button--primary{
  background:#4154F1
}

/deep/.el-button.el-button--success{
  background:#28bd6c
}



</style>
